<template>
  <div class="people">
    <div class="flexAround" style="margin-bottom:30px">
        <div class="part1_div">
          <div>在场人数</div>
          <div>24</div>
        </div>
        <div class="part1_div">
          <div>离场人数</div>
          <div>2</div>
        </div>
        <div class="part1_div" style="  border-right: none;">
          <div>总计人数</div>
          <div>26</div>
        </div>
      </div>

    <div class="flexBetween" style="margin-bottom:10px">
        <div style="color:#333;font-size:18px">人员列表</div>
        <div class="flexBetween">
          <div style="margin-right:30px">
            <a-radio-group
              v-model="radioGroup"
              :style="{ marginBottom: '8px' }"
            >
              <a-radio-button value="1">
                全部
              </a-radio-button>
              <a-radio-button value="2">
                在场
              </a-radio-button>
              <a-radio-button value="3">
                离场
              </a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <a-input-search
              placeholder="请输入姓名查询"
              style="width: 200px"
              @search="onSearch"
            />
            <br />
          </div>
        </div>
        
      </div>
    <div>
          <a-table :columns="columns" :data-source="data" @change="onChange"  
          >
          <div class="td_name" slot="classGrop" slot-scope="text" @click="people_info">{{ text }}</div>
          </a-table>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioGroup: "1",
       columns: [
        {
          title: "人员编码",
          dataIndex: "name",
          align:"center"
        },
        {
          title: "姓名",
          dataIndex: "classGrop",
          align:"center",
          key: "classGrop",
          scopedSlots: { customRender: "classGrop" },
        },
        {
          title: "岗位",
          dataIndex: "peopleNum",
          align:"center"
        },
        {
          title: "施工队",
          dataIndex: "personCharge",
          align:"center"
        },
        {
          title: "合同工资",
          dataIndex: "tell",
          align:"center"
        },
        {
          title: "进场时间",
          dataIndex: "entryTime",
          align:"center"
        },
        {
          title: "离场时间",
          dataIndex: "leaveTime",
          align:"center"
        }
      ],
      data: [
        {
          key: "1",
          name: "01111201",
          classGrop: "王志",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "",
        },
        {
          key: "2",
         name: "01111202",
          classGrop: "潘海涛",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "2020-02-12",
        },
        {
          key: "3",
          name: "01111203",
          classGrop: "王权",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "",
        },
        {
          key: "4",
          name: "01111204",
          classGrop: "李海",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "",
        },
         {
          key: "5",
          name: "01111205",
          classGrop: "李志同",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "",
        },
         {
          key: "6",
          name: "01111206",
          classGrop: "张全义",
          peopleNum: '普工',
          personCharge: "路基一队",
          tell: "7500",
          entryTime: "2020-02-12",
          leaveTime: "",
        },
      ],
    };
  },
  methods:{
      onSearch() {},
    onChange(pagination, filters, sorter) {
      console.log("params", pagination, filters, sorter);
    },
    people_info(){
        this.$router.push({path:'/personnelInformation'})
    }
  }
};
</script>

<style scoped>
    /* ::v-deep .ant-table-pagination.ant-pagination{
   display: none; } */
   .part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title{
    color:#1890ff ;
    font-size: 16px;
    margin-bottom: 10px;
}
.td_name{
    color: #1890ff;
    cursor: pointer;
}

</style>
